import React from "react";
import styles from "./index.module.less";
import SvgIcon from "@components/SvgIcon";
import { useNavigate } from "react-router-dom";
import moment from "moment";
import { profile } from "@depjs/storage";

const Message = (props) => {
    const navigate = useNavigate();
    const { item } = props;

    return (
        <div className={styles.message}>
            <p className={styles.title}>
                <span
                    onClick={() => {
                        navigate(`/messageBoard/${item.key}`);
                    }}
                >
                    {item.title}
                </span>
            </p>
            <p className={styles.content}>{item.content}</p>
            <div className={styles.foot}>
                <div className={styles.like_wrap}>
                    <div className={styles.like}>
                        <SvgIcon
                            font={
                                item.likeList.includes(profile.userName)
                                    ? "icon-dianzan01"
                                    : "icon-dianzan"
                            }
                        />
                    </div>
                    <p
                        className={styles.like_nums}
                        style={{
                            color: item.likeList.includes(profile.userName)
                                ? "#1890ff"
                                : "#888383",
                        }}
                    >
                        {item.likeNum}
                    </p>
                </div>
                <div className={styles.time}>
                    {moment(item.publishDate).format("YYYY年MM月DD日 HH:mm:ss")}
                </div>
            </div>
            {item.isAccepted ? (
                <div className={styles.accept}>本站采纳留言专用章</div>
            ) : null}
        </div>
    );
};

export default Message;
